<template>
    <div   class="myCommodity">
        <div class="commodity">
            <div class="pictorial">
                <img :src="commodity.prodImage[1]">
            </div>
            <div class="detailed">
                <span class="introduce">{{commodity.prodSubTitle}}</span>
                <p class="synopsis">{{commodity.prodSupTitle}}</p><br>
                <p class="soldOut">已售：{{commodity.sellCount}}/件</p><br>
                <p class="price">
                    <span class="cost">￥{{Number(commodity.currentPrice).toFixed(2)}}</span>
                    <span class="measureWord">{{commodity.measureWord}}</span>
                    <span class="originalCost">{{Number(commodity.originPrice).toFixed(2)}}</span>
                </p>
            </div>
        </div>
        <br>
    </div>
</template>

<script>
    export default {
        name: "myCommodity",
        props:{
            commodity:Object
        }
    }
</script>

<style scoped>
    .commodity{
        width: 100vw;
        display: inline-block;
        border-top:1px solid #ebebeb;
        height: 280px;
    }
    .pictorial, .detailed{
        display: inline-block;
        vertical-align: middle;
        box-sizing: border-box;
        overflow: hidden;
        margin:0 0 0 20px;
    }
    .pictorial{
        height: 280px;
        text-align: center;
        width:32%;
    }
    .pictorial>img{
        display: inline-block;
        width: 240px;
        height: 240px;
        margin: 20px 0;
    }
    .detailed{
        width:60%;
        position: relative;
        /*padding-top: 10px;*/
    }
    .detailed>p{
      display: inline-block;
    }
    .detailed>span{
        line-height: 1.2;
    }
    .introduce{
        width: 100%;
        height: 40px;
        font-size: 32px;
        word-break:break-all;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        color: #282828;
        margin-bottom: 10px;
        font-family: "Adobe 黑体 Std R";
        -webkit-box-orient: vertical;
        -webkit-line-clamp:1;
    }
    .synopsis,.soldOut{
      width: 100%;
      height: 40px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp:1;
        /*margin-top: 10px;*/
        color: #888888;
        margin-left: 8px;
    }
    .synopsis{
      font-size: 30px;
    }
    .soldOut{
      font-size: 26px;
    }
    .price{
        font-size: 0;
        margin-top: 10px;
    }
    .price>span{
        font-size: 24px;
        color: #f23030;
    }
    .price>.cost{
        font-size: 36px;
        color: #f23030;
    }
    .price>.originalCost{
        font-size: 28px;
        color: #737373;
        text-decoration:line-through;
        margin-left: 10px;
    }
    .price>.measureWord{
        font-size: 32px;
        color: #7a7a7a;
    }
</style>
